<template>
  <div>
    <Row class="btn">
      <Button type="text" :class="show === 1 ? 'active' : ''" @click="show = 1">见证宝</Button>
      <Button type="text" :class="show === 2 ? 'active' : ''" @click="show = 2">新大陆</Button>
    </Row>
    <Row>
      <transition name="fade" mode="out-in">
        <balance-item v-if="show === 1"></balance-item>
        <new-word v-if="show === 2"></new-word>
      </transition>
    </Row>
  </div>
</template>

<script>
import BalanceItem from './components/balance'
import NewWord from './components/word'

export default {
  name: 'accoun_balance',
  components: {
    BalanceItem,
    NewWord
  },
  data() {
    return {
      show: 2
    }
  }
}
</script>
<style lang="less" scoped>
  .btn {
    background-color: #fff;
    margin: 15px 0 10px 0;
    padding: 8px 10px;
    .ivu-btn {
      padding: 5px 25px;
      background-color: #F0F0F0;
      color: #333;
      margin-right: 10px;
      border-radius: unset;
    }
    .active {
      color: #fff;
      background: #008cce;
    }
  }
</style>
